<template>
  <div>
    <h1 style="margin: 30px 0 0 5%">螺钉采购订单</h1>
    <el-row :gutter="15">
      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px" style="margin: 30px 0 0 5%">
        <el-col :span="7">
          <el-form-item label="订单号" prop="field120">
            <el-input v-model="formData.field120" placeholder="请输入订单号"  clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="名称" prop="name">
            <el-input v-model="formData.name" placeholder="请输入名称" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="物料号" prop="field132">
            <el-input v-model="formData.field132" placeholder="请输入物料号" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="型号" prop="materialNo">
            <el-select v-model="formData.materialNo" placeholder="请选择型号" clearable :style="{width: '100%'}">
              <el-option v-for="(item, index) in materialNoOptions" :key="index" :label="item.label"
                         :value="item.value" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="单位" prop="field103">
            <el-input-number v-model="formData.field103" placeholder="颗/包" controls-position=right>
            </el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="采购总量" prop="quantity">
            <el-input-number v-model="formData.quantity" placeholder="请输入采购总量" controls-position=right>
            </el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="业务员编号" prop="applicant">
            <el-input v-model="formData.applicant" placeholder="业务员编号" :disabled='true' clearable
                      :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="状态" prop="field106">
            <el-select v-model="formData.field106" placeholder="请输入状态" clearable :style="{width: '100%'}">
              <el-option v-for="(item, index) in field106Options" :key="index" :label="item.label"
                         :value="item.value" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="创建时间" prop="field109">
            <el-date-picker type="datetime" v-model="formData.field109" format="yyyy-MM-dd HH:mm"
                            value-format="yyyy-MM-dd HH:mm" :style="{width: '100%'}" placeholder="请输入创建时间" clearable>
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="更新时间" prop="field131">
            <el-date-picker type="datetime" v-model="formData.field131" format="yyyy-MM-dd HH:mm"
                            value-format="yyyy-MM-dd HH:mm" :style="{width: '100%'}" placeholder="请输入更新时间" clearable>
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="21">
          <el-form-item label="物料描述" prop="text">
            <el-input v-model="formData.text" type="textarea" placeholder="请输入物料描述" readonly
                      :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="21">
          <el-form-item label="备注" prop="field122">
            <el-input v-model="formData.field122" type="textarea" placeholder="请输入备注"
                      :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="21">
          <el-form-item size="large">
            <el-button type="primary" @click="submitForm">提交</el-button>
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
  </div>
</template>
<script>
import {getUserProfile} from "@/api/system/user";
export default {
  components: {},
  props: [],
  data() {
    return {
      formData: {
        field120: undefined,
        name: undefined,
        field132: undefined,
        materialNo: 10,
        field103: undefined,
        quantity: undefined,
        applicant: undefined,
        field118: undefined,
        field106: undefined,
        field109: undefined,
        field131: undefined,
        text: undefined,
        field122: undefined,
      },
      rules: {
        field120: [{
          required: true,
          message: '请输入订单号',
          trigger: 'blur'
        }],
        name: [{
          required: true,
          message: '请输入名称',
          trigger: 'blur'
        }],
        field132: [{
          required: true,
          message: '请输入物料号',
          trigger: 'blur'
        }],
        materialNo: [{
          required: true,
          message: '请选择型号',
          trigger: 'change'
        }],
        field103: [{
          required: true,
          message: '颗/包',
          trigger: 'blur'
        }],
        quantity: [{
          required: true,
          message: '请输入采购总量',
          trigger: 'blur'
        }],
        applicant: [{
          required: true,
          message: '业务员编号',
          trigger: 'blur'
        }],
        field106: [{
          required: true,
          message: '请输入状态',
          trigger: 'change'
        }],
        field109: [{
          required: true,
          message: '请输入创建时间',
          trigger: 'change'
        }],
        field131: [{
          required: true,
          message: '请输入更新时间',
          trigger: 'change'
        }],
        text: [{
          required: true,
          message: '请输入物料描述',
          trigger: 'blur'
        }],
        field122: [{
          required: true,
          message: '请输入备注',
          trigger: 'blur'
        }],
      },
      materialNoOptions: [{
        "label": "10",
        "value": 10
      }, {
        "label": "20",
        "value": 20
      }, {
        "label": "30",
        "value": 30
      }, {
        "label": "40",
        "value": 40
      }, {
        "label": "50",
        "value": 50
      }, {
        "label": "60",
        "value": 60
      }],
      field106Options: [{
        "label": "选项一",
        "value": 1
      }, {
        "label": "选项二",
        "value": 2
      }],
      status:''
    }
  },
  computed: {},
  watch: {},
  created() {
    // 创建状态将 业务员编号 加到界面上 并显示是否合规
    if(this.status==='create'){
      this.getUser()
    }
  },
  mounted() {
  },
  methods: {
    submitForm() {
      this.$refs['elForm'].validate(valid => {
        if (!valid) return
        // TODO 提交表单
      })
    },
    resetForm() {
      this.$refs['elForm'].resetFields()
    },
  //   获取当前用户
    getUser() {
      getUserProfile().then(response => {
        // 判断是否为采购部门
        if(response.data.dept.deptName ==='采购部门'){
          // 用户名（id）
          this.formData.applicant = response.data.userName;
        }
      });
    }
  }
}

</script>
<style>

</style>
